<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-info-widget" :style="getStyle('head')">
      <!--科室信息:1-科室 2-号别 3-诊室-->
      <div class="dept-room" :class="getDeptHideClassName">
        <p class="dept item" v-if="optionsInfo.checkList.includes(1)">
          <ScrollX>{{ getRoomDiffInfo || '\u00a0' }}</ScrollX>
        </p>
        <p class="dept item" v-if="optionsInfo.checkList.includes(2)">
          <ScrollX>{{ getParentRegisterObjName || '\u00a0' }}</ScrollX>
        </p>
        <p class="room item">
          <ScrollX>
            {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || getRoomDeptInfo['roomName'] || '\u00a0' }}
          </ScrollX>
        </p>
      </div>

      <!--医生信息-->
      <template v-for="item in getRoomDoctorInfo">
        <div class="doctor-info flex-box">
          <div class="picture flex-box-left">
            <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
          </div>
          <template v-if="optionsInfo['docInfoMode'] === 1">
            <div class="info flex-box-right">
              <div class="name" :style="getStyle('doctorName')">
                <ScrollX>{{ (item.workerName) || '\u00a0' }}</ScrollX>
              </div>
              <div class="level">
                <ScrollX>{{ (item.workerTitle) || '\u00a0' }}</ScrollX>
              </div>
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <div class="container">
                  <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                  <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="10"/>
                </div>
              </div>
            </div>
            <div class="doctor-code" v-if="optionsInfo.doctorCodeHide&&!!(item.workerBusinessCard)">
              <div class="code-picture">
                <img :src="`${item.workerBusinessCard}`" alt="医生二维码">
              </div>
              <div class="describe">医生二维码</div>
            </div>
          </template>
          <template v-if="optionsInfo['docInfoMode'] === 2">
            <div class="doc-Info-mode-2 flex-box-right">
              <div class="doctor-syn">
                <div class="name" :style="getStyle('doctorName')">
                  <ScrollX>
                    {{ (item.workerName) || '\u00a0' }}
                  </ScrollX>
                </div>
                <div class="level">
                  <ScrollX>
                    {{ (item.workerTitle) || '\u00a0' }}
                  </ScrollX>
                </div>
              </div>
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <div class="container">
                  <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                  <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="6"/>
                </div>
              </div>
              <div class="code-area">
                <div class="code-left">
                  <div class="first">
                    <div class="code-picture">
                      <img :src="`${item?.workerBusinessCard || code1}`" alt="医生二维码">
                    </div>
                    <div class="describe">云医生二维码</div>
                  </div>
                  <div class="last">
                    <div class="name item">
                      <ScrollX>
                        {{ (item.workerName) || '\u00a0' }}
                      </ScrollX>
                    </div>
                    <div class="sign item">
                      <ScrollX>
                        {{ (item.workerTitle) || '\u00a0' }}
                      </ScrollX>
                    </div>
                    <div class="dept item">
                      <div class="title-doctor">科室:</div>
                      <div class="content">
                        <ScrollX>{{ (item.deptName) || '\u00a0' }}</ScrollX>
                      </div>
                    </div>
                    <div class="dept item">
                      <div class="title-doctor">学历:</div>
                      <div class="content">
                        <ScrollX>{{ (item.workerDegree) || '\u00a0' }}</ScrollX>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="code-right">
                  <div class="code-picture">
                    <template v-if="!!(optionsInfo?.hospitalCode)&&!!(optionsInfo?.hospitalCode?.length)">
                      <img :src="optionsInfo?.hospitalCode[0].url || code1" alt="互联网"/>
                    </template>
                  </div>
                  <div class="describe">云医院二维码</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="optionsInfo['docInfoMode'] === 3">
            <div class="doc-Info-mode-3 flex-box-right">
              <div class="area-wrap">
                <div class="doctor-syn">
                  <div class="name" :style="getStyle('doctorName')">
                    <ScrollX>
                      {{ (item.workerName) || '\u00a0' }}
                    </ScrollX>
                  </div>
                  <div class="level">
                    <ScrollX>
                      {{ (item.workerTitle) || '\u00a0' }}
                    </ScrollX>
                  </div>
                </div>
                <div class="doctor-connect">
                  <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                  <div class="container">
                    <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                    <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="6"/>
                  </div>
                </div>
              </div>
              <div class="code-area">
                <div class="code-left">
                  <div class="first">
                    <div class="code-picture">
                      <img :src="`${item?.workerBusinessCard || code1}`" alt="医生二维码">
                    </div>
                    <div class="describe">
                      <div class="describe-inside first-name">
                        <ScrollX>
                          {{ (item.workerName) || '\u00a0' }} {{ (item.workerDegree) || '\u00a0' }}
                        </ScrollX>
                      </div>
                      <div class="describe-inside second-dept">
                        <template v-if="!!(item.deptName) || !!(item.workerTitle)">
                          <ScrollX>
                            {{ (item.deptName) || '\u00a0' }}
                            <template v-if="!!(item.workerTitle)">|</template>
                            {{ (item.workerTitle) || '\u00a0' }}
                          </ScrollX>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="code-right">
                  <div class="code-picture">
                    <template v-if="!!(optionsInfo?.hospitalCode)&&!!(optionsInfo?.hospitalCode?.length)">
                      <img :src="optionsInfo?.hospitalCode[0].url || code1" alt="互联网"/>
                    </template>
                  </div>
                  <div class="describe">云医院二维码</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="optionsInfo['docInfoMode'] === 4">
            <div class="doc-Info-mode-4 flex-box-right">
              <div class="doctor-syn">
                <div class="name" :style="getStyle('doctorName')">
                  {{ sliceStrInfo((item?.workerName), 3) || '\u00a0' }}
                </div>
                <div class="level">
                  {{ sliceStrInfo((item?.workerTitle), 5) || '\u00a0' }}
                </div>
              </div>
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <div class="container">
                  <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                  {{ (item.workerIntro) || '\u00a0' }}
                </div>
              </div>
              <div class="code-area">
                <div class="code-left">
                  <div class="top">
                    <div class="left">
                      <img :src="`${item?.workerBusinessCard || code1}`" alt="医生二维码">
                    </div>
                    <div class="right">
                      <ul class="item">
                        <li class="title">扫一扫</li>
                        <li class="content-item">1、预约我的门诊时间</li>
                        <li class="content-item">2、进入我的云诊室</li>
                      </ul>
                    </div>
                  </div>
                  <div class="bottom">
                    {{ sliceStrInfo(item?.workerName, 3) || '\u00a0' }}
                    {{ sliceStrInfo(item?.workerDegree, 5) || '\u00a0' }}
                  </div>
                </div>
                <div class="code-right">
                  <div class="code-picture">
                    <template v-if="!!(optionsInfo?.hospitalCode)&&!!(optionsInfo?.hospitalCode?.length)">
                      <img :src="optionsInfo?.hospitalCode[0].url || code1" alt="互联网"/>
                    </template>
                  </div>
                  <div class="describe">云医院二维码</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!--患者信息-->
        <div class="patient-info" :class="`patient-info-${optionsInfo.docInfoMode || 1}`">
          <!--就诊患者-->
          <div class="item current-patient flex-box" :class="getPatientClassName('current-patient',item)">
            <div class="title flex-box-left">{{ optionsInfo['currentPatientContent'] || '就诊' }}</div>
            <div class="content flex-box-right" :class="{'current-patient-info': scrollInfo(item)}">
              <p class="no-scroll-info" :style="getStyle('currentPatient')">
                <template v-for="PatientItem in currentPatient(item.treatingPatient)">
                  {{ (PatientItem.orderNo) || '\u00a0' }}
                  {{ (PatientItem.patientName) || '\u00a0' }}
                </template>
              </p>
            </div>
          </div>
          <!--候诊患者-->
          <template v-if="!(optionsInfo.waitingPatientHide)">
            <div class="item wait-patient flex-box" :class="getPatientClassName('wait-patient',item)">
              <div class="title flex-box-left">{{ optionsInfo['waitingPatientContent'] || '候诊' }}</div>
              <template v-if="waitPatientTypeInfo ===1">
                <div class="content flex-box-right">
                  <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                     :key="`${item2.patientIdNo}-${index}`" :style="getStyle('waitPatient')">
                    {{ item2.orderNo || '\u00a0' }} {{ item2.patientName || '\u00a0' }}
                  </p>
                </div>
              </template>
            </div>
          </template>
        </div>
      </template>
    </div>
  </CompOperate>
</template>

<script>
import {pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {NoticeBar, Swipe, SwipeItem} from "vant";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue';
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-alone-info-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      code1: require("@a/images/design/placeholder-code.png"),
    }
  },

  computed: {
    // 判断候诊模式
    waitPatientTypeInfo() {
      let {waitPatientType = 1} = this.optionsInfo;
      return waitPatientType
    },

    // 判断当前患者是否滚动
    scrollInfo() {
      return function (info) {
        return !!(info.treatingPatient) && (info.treatingPatient.length) > 1
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(info.headHeight));
            Reflect.set(Obj, 'backgroundColor', `${(info.backgroundColor)}`);
            return Obj;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(info.imageHeight));
            Reflect.set(Obj, 'width', pxToVw(info.imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(info.imageRadius));
            return Obj;
          case 'doctorName':
            Reflect.set(Obj, 'fontWeight', (info.doctorFontWeight) || 'normal');
            return Obj;
          case 'currentPatient':
            Reflect.set(Obj, 'fontSize', pxToVw(info?.currenPatientFontSize || 86));
            return Obj;
          case 'waitPatient':
            Reflect.set(Obj, 'fontSize', pxToVw(info?.waitPatientFontSize || 86));
            return Obj;
        }
      }
    },

    // 获取当前患者号别或原科室
    getParentRegisterObjName() {
      const self = this;
      let {checkList, registerObjNameKey, registerSource, relationRegister} = (self.optionsInfo);
      console.log(relationRegister);
      let boolean = checkList.includes(2);
      let boolean2 = checkList.includes(1);
      let listInfo = (this.getRoomDoctorInfo);
      let roomDeptInfo = (this.getRoomDeptInfo);
      if (boolean) {
        // 号别来源当前医生呼叫的患者
        if (registerSource === 2) {
          if (!!(listInfo?.length)) {
            let patientList = Array();
            if (listInfo[0]?.treatingPatient?.length) {
              patientList = listInfo[0].treatingPatient
            } else if (listInfo[0]?.preTreatingPatient?.length) {
              patientList = listInfo[0].preTreatingPatient
            } else {
              patientList = Array()
            }
            if (patientList?.length) {
              let registerObjNameInfo = Array();
              patientList.forEach((item) => {
                let temp = (item[registerObjNameKey] || item['registerObjName']);
                if (!!temp) {
                  registerObjNameInfo.push(temp)
                }
              })
              // 去重
              let registerObjName = self.$lodash.compact(registerObjNameInfo);
              if (!!registerObjName && !!(registerObjName.length)) {
                return self.$lodash.uniq(registerObjName).join(',')
              }
            } else {
              return '\u00a0'
            }
          } else {
            if (relationRegister) {
              return (roomDeptInfo?.registerObjName) || '\u00a0'
            } else {
              return '\u00a0'
            }
          }
        } else {
          // 号别来源当前医生所在科室号别
          return (roomDeptInfo?.registerObjName) || '\u00a0'
        }
      } else if (boolean2) {
        return '\u00a0'
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row?.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    getDeptHideClassName() {
      let {checkList, deptRoomPosition, roomeInfoReverse} = (this.optionsInfo);
      if (checkList && (checkList.length === 1) && checkList[0] === 3) {
        return 'dept-room-hideDept'
      } else {
        if (deptRoomPosition) {
          return 'dept-room-position'
        }
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let {waitMode, waitingPatientHide} = (this.optionsInfo);
      return function (type, row) {
        let waitLen = row?.waitingPatientList?.length || 1
        if (!waitingPatientHide) {
          switch (type) {
            case 'current-patient':
              return parseInt(waitMode) !== 1 ? 'current-patient' : 'current-patient2'
            case 'wait-patient':
              switch (waitMode) {
                case 1:
                  return 'wait-patient'
                case 2:
                  return 'wait-patient2'
                case 3:
                  return 'wait-patient3'
                case 4:
                  return 'wait-patient4'
                case 5:
                  return 'wait-patient5'
                case 6:
                  return 'wait-patient6'
              }
          }
        } else {
          return 'hide-waiting-patient'
        }
      }
    },

    // 就诊患者
    currentPatient() {
      return function (row) {
        if (!!(row?.length)) {
          return row.slice(0, 1);
        } else {
          return Array(1).fill({});
        }
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      let list = devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
      if (!!(list?.length)) {
        return list.slice(0, 1);
      } else {
        return [{}];
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 科室可能因为医生是否登录会有差异
    getRoomDiffInfo() {
      let list = (this.getRoomDoctorInfo);
      let deptInfo = (this.getRoomDeptInfo)
      if (list?.length) {
        return list[0].deptName || deptInfo?.deptName || '\u00a0'
      } else {
        return deptInfo?.deptName || '\u00a0'
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let {waitPatientType, waitMode, waitPatientNumber} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            return (!!row && !!(row?.length)) ? row.slice(0, waitMode) : []
          case 2:
            return (!!row && !!(row?.length)) ? row.slice(0, waitPatientNumber) : []
        }
      }
    },


    //截取字符串长度
    sliceStrInfo() {
      return function (str, number) {
        if (str?.length) {
          return (str?.length > number) ? str.slice(0, number) : str;
        } else {
          return '\u00a0';
        }
      }
    }
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.$store.dispatch('setRoomDeptInfo', data)
          break
        case "roomDoctorInfo":
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
      }
    },

    // 滚动结束
    handleScrollEnd() {

    },

    handleError(event) {
      const loadedImg = event.target;
    }
  },


  watch: {
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
.scene-DRC-info-widget {
  padding: 28px 30px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;
  //科室
  .dept-room {
    padding: 20px 0 8px 0;
    background: #0059B3;
    height: 310px;
    border-radius: 20px;
    overflow: hidden;

    p {
      color: #FFFFFF;
      text-align: center;
      font-size: 80px;
      padding: 0 30px;
    }

    .dept {
      font-size: 80px;
      line-height: 120px;
      @include singleEllipsis(100%);
    }

    .room {
      font-size: 120px;
      font-weight: normal;
      line-height: 180px;
      min-height: 170px;
      @include singleEllipsis(100%);
    }

  }

  //隐藏科室
  .dept-room-hideDept {
    display: flex;
    align-items: center;
    align-self: center;
  }

  // 科室诊室调整上下位置
  .dept-room-position {
    display: flex;
    flex-direction: column-reverse;

    .dept {
      font-size: 120px;
      font-weight: normal;
      line-height: 180px;
      min-height: 170px;
      @include singleEllipsis(100%);
    }

    .room {
      font-size: 80px;
      line-height: 120px;
      @include singleEllipsis(100%);
    }
  }

  //医生信息
  .doctor-info {
    height: 486px;
    display: flex;
    margin: 48px 0 48px 0;
    min-width: auto;

    .picture {
      flex: inherit;
      border-radius: 20px;
      overflow: hidden;
      width: 358px;
      border: none;
      max-height: 486px;
      background: transparent;
      flex-shrink: 0;

      img {
        width: 100%;
      }
    }

    .info {
      flex: inherit;
      display: flex;
      flex-direction: column;
      width: calc(100% - 358px);
      padding-left: 30px;
      border: none;
      background: transparent;

      .name {
        font-size: 80px;
        line-height: 120px;
        font-weight: 500;
        flex-shrink: 0;
      }

      .level {
        font-size: 50px;
        font-weight: 500;
        line-height: 74px;
        padding-top: 8px;
        flex-shrink: 0;
        padding-bottom: 26px;
      }

      .scrollText {
        justify-content: left;
        align-items: start;
        align-self: start;
        text-align: left;

        :deep(.st-inner) {
          margin: 0;
        }
      }

      .doctor-connect {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 238px;

        .container {
          width: 100%;
          height: 100%;
          font-size: 36px;
          line-height: 60px;
          box-sizing: border-box;
        }
      }

    }

    .doctor-code {
      width: 200px;
      min-height: 200px;
      max-height: 250px;
      background: #E5EAEF;
      border-radius: 8px;
      padding: 15px;
      flex-shrink: 0;
      align-self: end;

      .code-picture {
        width: 200px;
        height: 200px;
        background: #E8E8E8;
        margin-bottom: 16px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .describe {
        text-align: center;
        width: 100%;
        font-size: 30px;
        color: #333333;
        line-height: 42px;
      }
    }


    //医生二维码--云医院模式2
    .doc-Info-mode-2 {
      flex: inherit;
      display: flex;
      flex-direction: column;
      width: calc(100% - 358px);
      flex-shrink: 0;
      padding-left: 30px;
      border: none;
      background: transparent;

      .doctor-syn {
        font-size: 80px;
        font-weight: 500;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 20px;
        padding-top: 20px;

        .name {
          font-size: 80px;
          font-weight: bolder;
          flex-shrink: 0;
          max-width: 50%;
          flex-wrap: nowrap;
          white-space: nowrap;
          overflow: hidden;
        }

        .level {
          font-size: 44px;
          //line-height: 1.5;
          font-weight: normal;
          flex-shrink: 0;
          max-width: 50%;
          flex-wrap: nowrap;
          white-space: nowrap;
          overflow: hidden;
          padding: 0 18px;
          color: #FFFFFF;
          border-radius: 8px;
          background: rgba(0, 89, 179, 1);
          display: flex;
        }

        :deep(.scrollText) {
          height: auto;
        }
      }

      .doctor-connect {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 126px;
        box-sizing: border-box;
        padding-bottom: 20px;

        .container {
          width: 100%;
          height: 100%;
          font-size: 36px;
          line-height: 60px;
          box-sizing: border-box;
        }
      }

      //医生二维码
      .code-area {
        height: 236px;
        background: transparent;
        display: flex;
        justify-content: space-between;

        .code-left {
          background: rgba(255, 255, 255, 1);
          border-radius: 18px;
          overflow: hidden;
          display: flex;
          width: 420px;
          flex-direction: row;

          .first {
            background: rgba(183, 205, 227, 1);
            padding: 12px 14px;
            border-radius: 18px;
            overflow: hidden;
            width: 100%;

            .code-picture {
              width: 160px;
              height: 160px;
              align-self: center;
              align-items: center;
              border-radius: 14px;
              overflow: hidden;
              margin: 10px auto 6px auto;
              justify-content: center;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .describe {
              text-align: center;
              width: 100%;
              font-size: 26px;
              color: #333333;
              line-height: 42px;
            }
          }

          .last {
            padding: 12px 14px;
            box-sizing: border-box;
            width: calc(100% - 210px);
            font-size: 28px;
            color: #333333;
            text-align: left;
            display: flex;
            flex-direction: column;

            .item {
              flex-grow: 1;
              box-sizing: border-box;
              flex-wrap: nowrap;
              line-height: 48px;
              white-space: nowrap;
            }

            .dept {
              overflow: hidden;
              display: flex;
              flex-direction: row;
              width: 100%;
              box-sizing: border-box;

              .title-doctor {
                padding-right: 10px;
                box-sizing: border-box;
              }

              .content {
                width: calc(100% - 60px);
              }
            ;
            }

            .name {
              box-sizing: border-box;
              font-size: 48px;
              line-height: 48px;
              font-weight: bolder;
              padding: 16px 0 10px 0;
            }
          }
        }

        .code-right {
          background: rgba(183, 205, 227, 1);
          padding: 12px 14px;
          border-radius: 12px;
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .code-picture {
            width: 160px;
            height: 164px;
            background: transparent;
            margin-bottom: 10px;
            margin-top: 6px;
            align-self: center;
            align-items: center;
            border-radius: 14px;
            overflow: hidden;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .describe {
            text-align: center;
            width: 100%;
            font-size: 26px;
            color: #333333;
            line-height: 42px;
          }
        }

      }
    }

    //医生二维码--云医院模式3
    .doc-Info-mode-3 {
      flex: inherit;
      display: flex;
      flex-direction: row-reverse;
      width: calc(100% - 358px);
      padding-left: 30px;
      flex-shrink: 0;
      border: none;
      overflow: hidden;
      background: transparent;

      .area-wrap {
        width: calc(100% - 212px);
        margin-left: 30px;
        height: 100%;
        flex-shrink: 0;
        box-sizing: border-box;

        .doctor-syn {
          font-size: 80px;
          font-weight: 500;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 20px;
          padding-top: 20px;

          .name {
            font-size: 80px;
            line-height: 1.45;
            font-weight: bolder;
            flex-shrink: 0;
            max-width: 100%;
            flex-wrap: nowrap;
            white-space: nowrap;
            overflow: hidden;
          }

          .level {
            font-size: 44px;
            line-height: 1.45;
            font-weight: normal;
            flex-shrink: 0;
            max-width: 100%;
            flex-wrap: nowrap;
            white-space: nowrap;
            overflow: hidden;
            color: #000000;
          }

          .scrollText {
            display: flex;

            :deep(.st-inner) {
              margin: initial;
            }
          }

        }

        .doctor-connect {
          display: flex;
          justify-content: space-around;
          width: 100%;
          height: calc(100% - 210px);
          box-sizing: border-box;
          padding-bottom: 20px;

          .container {
            width: 100%;
            height: 100%;
            font-size: 32px;
            line-height: 1.5;
            box-sizing: border-box;
          }
        }
      }

      //医生二维码
      .code-area {
        height: 100%;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .code-left {
          background: linear-gradient(180deg, #E8F2FE 0%, #ADCBEF 100%);
          border-radius: 10px;
          height: calc(50% - 2px);
          width: 190px;
          overflow: hidden;
          flex-shrink: 0;
          display: flex;
          flex-direction: row;
          margin-bottom: 14px;
          box-sizing: border-box;

          .first {
            background: transparent;
            padding: 12px 10px;
            border-radius: 18px;
            overflow: hidden;
            width: 100%;

            .code-picture {
              width: 140px;
              height: 140px;
              align-self: center;
              align-items: center;
              border-radius: 14px;
              overflow: hidden;
              margin: 10px auto 6px auto;
              justify-content: center;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .describe {
              text-align: center;
              width: 100%;
              font-size: 22px;
              color: #000000;

              div.describe-inside {
                line-height: 1.5;
                padding-bottom: 4px;
                white-space: nowrap;
              }

              .first-name {
                font-size: 24px;
                font-weight: 600;
              }

              .second-dept {
                font-size: 20px;
              }
            }
          }

        }

        .code-right {
          background: rgba(255, 255, 255, 1);
          padding: 12px 14px;
          border-radius: 12px;
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .code-picture {
            width: 160px;
            height: 164px;
            background: transparent;
            margin-bottom: 10px;
            margin-top: 6px;
            align-self: center;
            align-items: center;
            border-radius: 14px;
            overflow: hidden;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .describe {
            text-align: center;
            width: 100%;
            font-size: 26px;
            color: #000000;
            line-height: 42px;
          }
        }

      }
    }

    //医生二维码--云医院模式4
    .doc-Info-mode-4 {
      flex: inherit;
      display: flex;
      flex-direction: column;
      width: calc(100% - 358px);
      flex-shrink: 0;
      padding-left: 30px;
      border: none;
      background: transparent;

      .doctor-syn {
        font-size: 80px;
        font-weight: 500;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 10px;
        padding-top: 10px;

        .name {
          font-size: 80px;
          flex-shrink: 0;
          max-width: calc(50% - 10px);
          margin-right: 10px;
          flex-wrap: nowrap;
          white-space: nowrap;
          overflow: hidden;
        }

        .level {
          font-size: 54px;
          font-weight: normal;
          flex-shrink: 0;
          max-width: calc(50% - 46px);
          margin-left: 10px;
          flex-wrap: nowrap;
          white-space: nowrap;
          overflow: hidden;
          padding: 0 18px;
          color: #000000;
          border-radius: 8px;
          display: flex;
          align-items: center;
        }
      }

      .doctor-connect {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 156px;
        box-sizing: border-box;
        padding-bottom: 10px;

        .container {
          width: 100%;
          height: 100%;
          font-size: 34px;
          line-height: 1.36;
          overflow: hidden;
          box-sizing: border-box;
        }
      }

      //医生二维码
      .code-area {
        height: 236px;
        display: flex;
        background: transparent;
        justify-content: space-between;

        .code-left {
          background: linear-gradient(180deg, #E7F1FD 0%, #ADCBEF 100%);
          border-radius: 18px;
          overflow: hidden;
          display: flex;
          width: 444px;
          flex-direction: column;
          flex-shrink: 0;
          padding: 12px 0 12px 16px;
          box-sizing: border-box;

          .top {
            height: 206px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            margin: 0 0 0 14px;

            .left {
              width: 148px;
              height: 148px;
              align-self: center;
              align-items: center;
              border-radius: 2px;
              overflow: hidden;
              flex-shrink: 0;
              justify-content: center;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .right {
              margin-left: 10px;
              align-items: center;
              align-self: center;

              .item {
                align-self: center;
                flex-grow: 1;
                box-sizing: border-box;
                flex-wrap: nowrap;
                font-size: 24px;
                line-height: 1.5;
                white-space: nowrap;

                .title {
                  font-size: 26px;
                  line-height: 1.45;
                  padding-bottom: 4px;
                }

                .content-item {
                  font-size: 26px;
                  line-height: 1.4;
                }
              }
            }
          }

          .bottom {
            text-align: left;
            width: calc(100%);
            font-size: 34px;
            font-weight: bolder !important;
            color: rgba(1, 88, 177, 1);
            line-height: 42px;
            padding-top: 2px;
            box-sizing: border-box;
          }

        }

        .code-right {
          background: linear-gradient(180deg, #E7F1FD 0%, #ADCBEF 100%);
          padding: 12px 14px;
          border-radius: 12px;
          overflow: hidden;
          width: calc(100% - 460px);
          display: flex;

          box-sizing: border-box;
          flex-direction: column;

          .code-picture {
            width: 90px;
            height: 90px;
            display: flex;
            background: transparent;
            margin-top: 30px;
            margin-bottom: 30px;
            align-self: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            flex-shrink: 0;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .describe {
            text-align: center;
            width: 100%;
            font-size: 24px;
            font-weight: bolder !important;
            color: rgba(1, 88, 177, 1);
            line-height: 48px;
            padding-top: 14px;
          }
        }

      }
    }
  }

  .doctor-info-1 {
    height: 600px;

    .picture {
      display: flex;
      align-self: end;
      align-items: flex-start;
    }

    .info {
      .desc {
        @include multiLineEllipsis(6);
        font-size: 40px;
        line-height: 64px;
        background: transparent;
      }
    }
  }

  .doctor-info-2 {
    height: 802px;
  }

  //患者信息
  .patient-info {
    .item {
      display: flex;
      overflow: hidden;
      border-radius: 20px;

      .title {
        color: white;
        align-items: center;
        align-self: center;
        text-align: center;
        height: 100%;
        line-height: 1.15;
        padding: 0 30px;
        flex: inherit;
        display: flex;
        width: 124px !important;
        font-size: 60px;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: center;
        justify-content: left;
        background: transparent;
        border: none;
        overflow: hidden;

        width: calc(100% - 124px) !important;

        p {
          font-size: 126px;
          width: 100%;
          line-height: 1.42;
          text-align: left;
          padding-left: 60px;
          @include singleEllipsis(100%)
        }


        :deep(.scroll) {
          width: 100%;
          min-height: 320px;
          overflow: hidden;

          .inside-content {
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            overflow: hidden;

            .patient {
              height: auto;
              flex-basis: 50%;
              min-width: 50%;
              box-sizing: border-box;
              overflow: hidden;
              font-size: 76px;
              line-height: 116px;
              text-align: left;
              padding-left: 30px;
              color: rgba(229, 134, 2, 1);

              .patient-orderNo {
                padding-right: 4px;
              }
            }
          }

          .scroll-area-1-1 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 120px;
              text-align: center;
              box-sizing: border-box;
              padding-left: 60px;
              line-height: 188px !important;
            }
          }

          .scroll-area-2-2 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 100px;
              text-align: center;
              box-sizing: border-box;
              line-height: 148px !important;
            }
          }
        }

        :deep(.scroll-hide-waiting) {
          height: 470px;

          .item {
            width: 100%;
            display: flex;
            padding-left: 60px;
            text-align: center;
          }
        }

        .no-scroll-area-1 {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            flex-basis: 100%;
            min-width: 100%;
            font-size: 120px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 188px !important;
          }
        }


        .no-scroll-area-2 {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          width: 100%;

          p {
            flex-basis: 100%;
            min-width: 100%;
            font-size: 90px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 148px !important;
          }
        }

        .no-scroll-area-3,
        .no-scroll-area-4 {
          display: flex;
          flex-wrap: wrap;

          p {
            flex-basis: 50%;
            min-width: 50%;
            font-size: 76px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 30px;
            line-height: 128px !important;
          }
        }

        .no-scroll-area-5,
        .no-scroll-area-6 {
          display: flex;
          flex-wrap: wrap;

          p {
            flex-basis: 50%;
            min-width: 50%;
            font-size: 70px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 30px;
            line-height: 108px !important;
          }
        }

      }

      .current-patient-info {
        display: flex;
        align-self: center;
        align-items: center;
      }
    }

    .current-patient {
      height: 220px;
      background: rgba(0, 89, 179, 0.2);

      .title {
        font-size: 60px;
        background: rgba(0, 89, 179, 1);
      }

      p {
        color: rgba(0, 89, 179, 1);
      }
    }

    .current-patient2 {
      height: 320px;
      min-width: auto;

      .title {
        font-size: 60px;
      }
    }

    .wait-patient {
      height: 320px;
      margin-top: 44px;
      margin-bottom: 44px;
      min-width: auto;
      background: rgba(255, 198, 85, 0.2);

      .title {
        font-size: 60px;
        background: rgba(229, 134, 2, 1);
      }

      p {
        color: rgba(229, 134, 2, 1);
        line-height: 186px !important;
      }
    }

    .wait-patient2 {
      height: 430px;

      p {
        line-height: 187px !important;
        font-size: 120px !important;
      }
    }

    .wait-patient3 {
      height: 430px;

      p {
        line-height: 147px !important;
        font-size: 100px !important;
      }
    }

    .wait-patient4 {
      height: 430px;

      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        p {
          flex-basis: 50%;
          font-size: 80px;
          text-align: center;
          line-height: 147px !important;
          @include singleEllipsis(100%)
        }
      }


    }

    .wait-patient5 {
      height: 430px;

      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        p {
          flex-basis: 50%;
          font-size: 70px;
          line-height: 147px !important;
        }
      }
    }

    .wait-patient6 {
      height: 430px;

      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        p {
          flex-basis: 50%;
          font-size: 70px;
          line-height: 147px !important;
        }
      }
    }

    //隐藏等待患者情况下--就诊患者的样式
    .hide-waiting-patient {
      height: auto;
      min-height: inherit;
      overflow: hidden;
      flex-direction: column;

      .title {
        width: 100% !important;
        height: 222px;
        font-size: 80px;
        justify-content: center;
      }

      .content {
        width: 100% !important;
        max-height: inherit;
        justify-content: center;

        p {
          padding-left: 0;
          font-size: 124px;
          line-height: 464px;
          text-align: center;
        }
      }
    }
  }

  .patient-info-2,
  .patient-info-3,
  .patient-info-4 {
    .flex-box {
      flex-direction: row-reverse;

      :deep(.current-patient-info) {
        .scroll-info {
          p.item {
            justify-content: center;
          }
        }

      }

      :deep(.no-scroll-info) {
        justify-content: center;
        text-align: center !important;
      }
    }

    .wait-patient,
    .wait-patient1,
    .wait-patient2,
    .wait-patient3 {
      :deep(.content) {
        p {
          text-align: center;
          padding-left: 0;
        }
      }
    }
  }
}
</style>
